<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/rp/common/taglib.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>用户列表</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  
  	<div class="mini-splitter" style="width: 100%; height: 100%;" borderStyle="border:0;">
  		<div size="150" showCollapseButton="true" minSize="120">
	    	<ul id="organTree" class="mini-tree" url="rp/system/organMng/getOrgans"
	    		style="width:100%;height:100%;" 
			    showTreeIcon="true" textField="name" 
			    idField="id" resultAsTree="false"
			    expandOnLoad="0" onnodeclick="organTreeNodeClick"> 
			</ul>
	    </div>
	    <div showCollapseButton="false">
	    	<div style="width:100%;">
		        <div class="mini-toolbar" style="padding:1px;border-top:0;border-left:0;border-right:0;">
		            <table style="width:100%;">
		                <tr>
		                    <td style="width:100%;">
		                        <a class="mini-button" onclick="addRow()"><i class="fa fa-user-plus fa-lg"></i> 新增</a>
		                        <a class="mini-button" onclick="saveRows()"><i class="fa fa-floppy-o fa-lg"></i> 保存</a>
		                        <a class="mini-button mini-button-danger" onclick="removeRows()"><i class="fa fa-user-times fa-lg"></i> 删除</a>
		                        <a class="mini-button" onclick="showAllUsers()">显示所有</a>
		                        <a class="mini-button" onclick="resetPasswords()"><i class="fa fa-eraser fa-lg"></i> 重置密码</a>
		                        <sec:authorize ifAllGranted="AUTH_SUPERADMIN">
							    	<a class="mini-button" iconCls="" onclick="changePassword()"><i class="fa fa-edit fa-lg"></i> 修改密码</a>
							    </sec:authorize>
		                    </td>
		                    <td style="white-space:nowrap;">
		                    	<!-- <input id="username" class="mini-textbox" emptyText="请输入用户名" onenter="search()"/>
		                        <input id="realname" class="mini-textbox" emptyText="请输入姓名" onenter="search()"/>   
		                        <a class="mini-button" onclick="search()"><i class="fa fa-search fa-lg"></i> 查询</a> -->
		                    </td>
		                </tr>
		            </table>           
		        </div>
		    </div>
		    
		    <div class="mini-fit">
			  	<div id="userGrid" class="mini-datagrid" 
			  		style="width: 100%; height: 100%;" borderStyle="border:0;"
			    	url="rp/system/userMng/getUsers" idField="id" pageSize="20"
			    	allowResize="false"
			    	allowCellEdit="true" allowCellSelect="true" multiSelect="true" 
			        editNextOnEnterKey="true" editNextRowCell="true" allowCellValid="true"
			        showFilterRow="true" onshowrowdetail="onShowRowDetail">
				    <div property="columns">
				        <div type="indexcolumn" headerAlign="center">序号</div>
				        <div type="expandcolumn" width="40">用户资料</div>
				        <div type="checkcolumn"></div>
				        <div width="50" renderer="onHeadImgRenderer" headerAlign="center" align="center">用户头像</div>
				        <div field="username" vtype="required" width="80" headerAlign="center" allowSort="true">
				        	用户名
				        	<input property="editor" class="mini-textbox" style="width:100%;" emptyText="用户名不建议是用中文"/>
				        	<input id="usernameFilter" property="filter" class="mini-textbox" style="width:100%;" emptyText="输入用户名搜索"
		                    	onenter="onFilterEnter"/>
				        </div>    
				        <div field="realname" vtype="required" width="50" headerAlign="center" allowSort="true">
				        	姓名
				        	<input property="editor" class="mini-textbox" style="width:100%;"/>
				        	<input id="realnameFilter" property="filter" class="mini-textbox" style="width:100%;" emptyText="输入姓名搜索"
		                    	onenter="onFilterEnter"/>
				        </div>
				        <div field="remark" width="100" headerAlign="center">
				        	备注<input property="editor" class="mini-textarea" style="width:200px;" minWidth="200" minHeight="50"/>
				        </div>
				        <div type="comboboxcolumn" field="organId" displayField="organName" width="50" headerAlign="center" renderer="onOrganRenderer">
				        	所属部门
				        	<input property="editor" class="mini-treeselect" 
				        		popupWidth="160"
				        		url="rp/system/organMng/getOrgans"
				        		valueField="id" textField="name" />
				        </div>
				        <div type="comboboxcolumn" autoShowPopup="true" 
				        	field="enabled2" vtype="required" width="40" align="center" headerAlign="center" renderer="onEnabledRenderer">
				        	激活状态
			                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />                
			            </div>
			            <!-- <div field="roles" displayField="" width="120" headerAlign="center" renderer="onRoleRenderer">
				        	角色<input property="editor" class="mini-buttonedit" onbuttonclick="onButtonEdit" style="width:100%;"/>
				        </div> -->
				        <div type="comboboxcolumn" field="roleId" displayField="roleName" vtype="required"
				        	width="50" headerAlign="center" autoShowPopup="true" renderer="onRoleRenderer2">
				        	角色
				        	<input property="editor" class="mini-treeselect" 
				        		popupWidth="160"
				        		url="rp/system/roleMng/getAllRolesByList"
				        		valueField="id" textField="name" />
				        </div>
				        <!-- <div width="60" headerAlign="center" renderer="onActionRenderer">
				        	操作
				        </div> -->
				        <div field="createDate" width="100" headerAlign="center" allowSort="true" renderer="onDateRenderer">
				        	创建日期
				        </div>                
				    </div>
				</div>
				
				<div id="userInfoContainer" style="display: none;">
					<form id="userInfoForm">
						<input name="id" class="mini-hidden" />
						<table>
							<tr>
								<td></td>
								<td><span style="color: red;">注：用户资料只有此用户可以修改</span></td>
							</tr>
							<tr>
								<td>性别：</td>
								<td>
									<input name="xb" width="200" class="mini-textbox" readOnly="true"/>
								</td>
								<td>年龄：</td>
								<td>
									<input name="nl" width="200" class="mini-textbox" readOnly="true"/>
								</td>
								<td>职位：</td>
								<td>
									<input name="zw" width="200" class="mini-textbox" readOnly="true"/>
								</td>
							</tr>
							<tr>
								<td>手机：</td>
								<td>
									<input name="sj" width="200" class="mini-textbox" readOnly="true"/>
								</td>
								<td>办公电话：</td>
								<td>
									<input name="bgdh" width="200" class="mini-textbox" readOnly="true"/>
								</td>
								<td>邮箱：</td>
								<td>
									<input name="yx" width="200" class="mini-textbox" readOnly="true"/>
								</td>
							</tr>
						</table>
					</form>
				</div>
		  	</div>
	    </div>
  	</div>
  	
	<script type="text/javascript">
		var organTree;
		var grid;
		var Genders = [{ id:1, text:"激活"}, { id:0, text:"禁用"}];
		var userInfoContainer;
		var userInfoForm;
		
		$(function(){
			mini.parse();
			organTree = mini.get("organTree");
			grid = mini.get("userGrid");
			grid.load();
			
			userInfoContainer = document.getElementById("userInfoContainer");
			
			userInfoForm = new mini.Form("userInfoForm");
		});
		
		function organTreeNodeClick(e){
			var node = e.node;
			//var username = mini.get("username").getValue();
            //var realname = mini.get("realname").getValue();
            //grid.load({ username: username, realname: realname, organId: node.id });
			grid.load({ organId: node.id });
		}
		
		function onShowRowDetail(e){
			var grid = e.sender;
            var row = e.record;
            
            var td = grid.getRowDetailCellEl(row);
            td.appendChild(userInfoContainer);
            userInfoContainer.style.display = "block";
            rp_ajax("rp/system/userInfoMng/getCurrentUserInfo", {userId:row.id}, function(result){
				var data = mini.decode(result);
				userInfoForm.setData(data);
				userInfoForm.setChanged(false);	
			});
		}
		
		function addRow() {         
            var newRow = { };
            grid.addRow(newRow, 0);
            grid.beginEditCell(newRow, "username");
        }
		
		function saveRows() {
			grid.validate();
			if (grid.isValid() == false) {
                var error = grid.getCellErrors()[0];
                grid.beginEditCell(error.record, error.column);
                return;
            }
			
            var data = grid.getChanges();
            var json = rp_encode(data);
            grid.loading("保存中，请稍等......");
            rp_ajax("rp/system/userMng/saveUsers", {data: json}, function(text){
            	if(text == "success"){
            		grid.reload();
            	}else{
            		grid.unmask();
            		mini.alert(text);	
            	}
            });
        }
		
		function removeRows() {
			var rows = grid.getSelecteds();
			if(rows.length == 0){
				mini.alert("请勾选需要删除的记录...");
			}else{
				mini.confirm("确定删除记录吗？", "友情提示",
		            function (action) {
		                if (action == "ok") {
		                    var json = rp_encode(rows);
		                    if (rows.length > 0) {
		                    	rp_ajax("rp/system/userMng/deleteUsers", {data: json}, function(result){
		                    		//grid.removeRows(rows, false);
		                    		grid.reload();
		                        });
		                    }
		                }
		            }
		        );
			}
        }
		
		function onFilterEnter(e) {
			organTree.selectNode(null);
			
            var username = mini.get("usernameFilter").getValue().toLowerCase();
            var realname = mini.get("realnameFilter").getValue().toLowerCase();
            
            grid.load({ username: username, realname: realname });
        }
		
		function showAllUsers(){
			organTree.selectNode(null);
			grid.load({});
		}
		
		function resetPasswords(){
			var rows = grid.getSelecteds();
			if(rows.length == 0){
				mini.alert("请勾选需要操作的记录...");
			}else{
				mini.confirm("确定重置密码吗？", "友情提示",
		            function (action) {
		                if (action == "ok") {
		                    var json = rp_encode(rows);
		                    if (rows.length > 0) {
		                    	rp_ajax("rp/system/userMng/resetPasswords", {data: json}, function(text){
		                    		if(text == "success"){
		                    			mini.alert("重置成功");
		                    			grid.reload();
		                    		}else{
		                    			mini.alert("重置失败！！！");
		                    		}
		                        });
		                    }
		                }
		            }
		        );
			}
			
		}
		
		function changePassword(){
			var rows = grid.getSelecteds();
            var json = rp_encode(rows);
            if (rows.length > 1) {
            	mini.alert("只能选中一条数据进行操作");
            	return;
            }else{
            	var row = grid.getSelected();
            	mini.open({
            		url: "rp/system/userMng/showChangePwdWindow?userId="+row.id,
            		title: "修改密码",
            		width: 300,
    				height: 200,
    				ondestroy: function (action) {
                        if (action == "ok") {
                        	grid.reload();
                        }
                    }
            	});
            }
		}
		
		function openAllotRolesWindow(){
			var row = grid.getSelected();
			mini.open({
				url: "rp/system/common/showSelectRolesWindow?userId="+row.id,
				title: "选择角色",
				width: 650,
				height: 400,
				onload: function () {
                	//var iframe = this.getIFrameEl();
                  	//iframe.contentWindow.setSelectData(row);
              	},
				ondestroy: function (action) {
                    if (action == "ok") {
                        var iframe = this.getIFrameEl();
						var data = iframe.contentWindow.getSelectData();
						grid.cancelEdit();
						var row = grid.getSelected();
						grid.updateRow(row, {
							roles: data
						});
                    }
                }
			});
		}
		
		function openEditUserinfoWindow(){
			mini.open({
				url: "rp/system/userMng/editUserinfo.jsp",
				title: "编辑用户资料",
				width: 300,
				height: 400,
				onload: function () {
                	//var iframe = this.getIFrameEl();
                  	//iframe.contentWindow.setSelectData(row);
              	},
				ondestroy: function (action) {
                    if (action == "ok") {
                        
                    }
                }
			});
		}
		
		function onActionRenderer(e){
			var actions = "";
			var record = e.record;
			var id = record.id;
			if(id){
				actions = "<a class='mini-button mini-button-small' onclick='openAllotRolesWindow()'><i class='fa fa-user-secret fa-lg'></i> 分配角色</a>";
			}
			return actions;
		}
		
		function onHeadImgRenderer(e){
			var record = e.record;
			var headImg = record.headImg;
			var imgSrc = "";
			if(headImg != null && headImg != ""){
				imgSrc = headImg;
			}else{
				imgSrc = "rp/images/head.png";
			}
			var html = "<img src='"+imgSrc+"' style='width: 50px; height: 50px;'/>"
			return html;
		}
		
		function onOrganRenderer(e){
			var value = e.cellHtml;
			return value;
		}
		
		function onEnabledRenderer(e){
			var value = e.value;
			if(value){
				if(value == "1") {
					return "<span style='color: green;'>已激活</span>"
				}
				return "<span style='color: red;'>未激活</span>";
			}
			return "";
		}
		
		function onRoleRenderer(e){
			var showStr = "";
			var roles = e.value;
			if(!roles){
				return "";
			}else if(roles.length > 0){
				var rolesJson = mini.encode(roles);
				var obj = eval(rolesJson);
				$(obj).each(function(index){
					var val = obj[index];
					showStr += val.name + ",";
				});
			}else{
				return "<span style='color:red;'>未分配角色</span>";
			}
			return showStr;
		}
		
		function onRoleRenderer2(e){
			var value = e.cellHtml;
			return value;
		}
		
	</script>
  </body>
</html>
